<template>
  <div class="dialog-container">
    <el-dialog
        v-model="props.dialogVisible"
        title="工作站选择"
        width="80%"
        @close="handleClose"
        :close-on-click-modal="false"
        center
    >
      <!-- Search Form -->
      <el-form :model="searchForm" inline>
        <el-form-item label="工作站编号">
          <el-input
              v-model="searchForm.workstationCode"
              placeholder="请输入工作站编号"
              clearable
          />
        </el-form-item>
        <el-form-item label="所属工序">
          <el-select v-model="searchForm.processCode" clearable style="width: 200px;">
            <el-option v-for="s of processData" :value="s.processCode" :label="s.processName"/>
          </el-select>
        </el-form-item>
        <el-form-item label="所在车间">
          <el-select v-model="searchForm.workshopCode" placeholder="请选择车间" clearable style="width: 200px;">
            <el-option v-for="s of workshopData" :label="s.workshopName" :value="s.workshopCode"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            搜索
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleReset">
            重置
          </el-button>
        </el-form-item>
      </el-form>

      <!-- Data Table -->
      <el-table :data="tableData" @current-change="selectClick" highlight-current-row style="width: 100%">
        <el-table-column prop="workstationCode" label="工作站编号"/>
        <el-table-column prop="workstationName" label="工作站名称"/>
        <el-table-column prop="workstationLocation" label="工作站地点"/>
        <el-table-column prop="workshop.workshopName" label="所在年间名称"/>
        <el-table-column prop="process.processName" label="所属工序"/>
        <el-table-column prop="remark" label="备注"/>
      </el-table>
      <!-- Dialog Footer -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref, watch} from 'vue'
import {findProcessSetting} from "@/apis/zyj/ProcessSettings.js";
import {findWorkshop} from "@/apis/zyj/workshop.js";
import {findWorkstation} from "@/apis/xms/index.js";
import {ElMessage} from "element-plus";

const props = defineProps({
  dialogVisible: Boolean,
  processCode: String
})
const emit = defineEmits(['close','dataReturn'])

async function tableInit() {
  await findWorkstation(searchForm).then(res => {
    console.log("工作站", res)
    tableData.value = res.records
  });
}

watch(() => props.dialogVisible, (newDate) => {
  searchForm.processCode = props.processCode
  console.log(searchForm)
  tableInit();
})

onMounted(() => {
  findProcessSetting('', '-1', '-1').then(res => {
    processData.length = 0
    processData.value.push(...res)
  })
  findWorkshop('', '-1', '-1').then(res => {
    workshopData.length = 0
    workshopData.value.push(...res)
  })
})

const workshopData = ref([])
const processData = ref([])
const selectProduct=ref()

const searchForm = reactive({
  workstationCode: '',
  processCode: '',
  workshopCode: ''
})

const handleClose = () => {
  emit('close')
}

// Table data
const tableData = ref([])

// Methods
const handleSearch = () => {
  tableInit()
}

const handleReset = () => {
  searchForm.workstationCode = ''
  searchForm.processCode = props.processCode
  searchForm.workshopCode = ''
  tableInit()
}

// table选择项发生变化时会触发该事件
const selectClick = (row) => {
  selectProduct.value=null
  selectProduct.value=row
}

const handleConfirm = () => {
  console.log(selectProduct.value)
  if (selectProduct.value==null) {
    ElMessage.error("请选择数据")
    return;
  }
  if (selectProduct.value.processCode!=props.processCode){
    ElMessage.error('请选择相关的工作站')
    return
  }else {
    emit('dataReturn', selectProduct.value)
    handleClose()
  }
}
</script>

<style scoped>
.dialog-container {
  font-family: system-ui, -apple-system, sans-serif;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>